<!-- 广告轮播 -->
<template>
	<div class="home-adswiper-wrap com-card">
		<swiper class="home-adswiper"
			:aspect-ratio="art"
			:dots-position="dotsPos"
			:dots-class="dotsCls"
			:auto="isAuto"
			:loop="isLoop"
		>
			<swiper-item v-for="item in list" :key="item">
				<img :src="item">
			</swiper-item>
		</swiper>
	</div>
</template>
<script type="text/javascript">
	import { Swiper, SwiperItem } from 'vux'
	import { QueryHomeAdModel } from '@/model/home.model'

	export default {
		name: 'home-ad-swiper',
		data: () => {
			return {
				art: 0.4637,
				dotsPos: 'center',
				dotsCls: 'home-rec-dot',
				isAuto: true,
				isLoop: true,
				QueryHomeAdModel: new QueryHomeAdModel(),
				list: []
			}
		},
		async created() {
			let list;
			this.QueryHomeAdModel.setParams({});
			try {
				list = await this.QueryHomeAdModel.go()
			} catch (err) {
				list = err
			}
			if (list.data && list.data.length) {
				this.list = list.data;
			}
		},
		components: {
			Swiper,
			SwiperItem
		}
	}
</script>
<style lang="less">
	.home-adswiper-wrap {
		background-color: #fff;
		padding: 30/75rem;
	}
	.home-adswiper {
		background-color: #eee;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.vux-slider > .home-rec-dot {
		& > a > .vux-icon-dot.active {
			background-color: #000;
		}
	}
</style>